<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .loading {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #eee
    }

    .loading-indicator {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        width: 80px;
        height: 80px;
         -webkit-animation:circle 1s linear;
    }
    @-webkit-keyframes circle{

        0%{ transform:rotate(0deg); }

        100%{ transform:rotate(360deg); }

    }

    .loading-indicator:before {
        content: "";
        display: block;
        width: 80px;
        height: 40px;
        padding-bottom: 0;
        box-sizing: border-box;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        background: -webkit-linear-gradient(0deg, #999, #bbb);

    }

    .loading-indicator:after {
        content: "";
        display: block;
        width: 80px;
        height: 40px;
        padding-top: 0;
        box-sizing: border-box;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        background: -webkit-linear-gradient(0deg, #eee, #bbb);
    }

    .loading-indicator>i {
        display: block;
        position: absolute;
        width: 70px;
        height: 70px;
        background: #eee;
        top: 5px;
        left: 5px;
        border-radius: 45px;
    }
</style>
<body>
<div class="loading">
    <div class="loading-indicator"><i></i></div>
</div>
</body>
</html>